import { ElMessage } from 'element-plus'
export const myCanvas = (id: string) => {
  const canvas = document.getElementById(id) as HTMLCanvasElement
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
    console.log(ctx, 'ctx')
    // 绘制矩形 (x,y,width,height) x,y表示从ctx左上角算起的坐标()相对于原点，width和height表示所绘制图像的大小
    ctx.fillRect(25, 25, 100, 100) // 绘制一个填充的矩形
    ctx.clearRect(45, 45, 60, 60) //清除指定矩形区域
    ctx.strokeRect(50, 50, 50, 50) //绘制一个矩形的边框
  } else {
    ElMessage.error('您的浏览器不支持canvas')
  }
}
